import React from 'react'
import { withRouter } from 'react-router-dom'
import { TabBar } from 'antd-mobile'

const tabList = [
  { title: '首页', icon: 'icon-ind', path: '/frame/home' },
  { title: '找房', icon: 'icon-findHouse', path: '/frame/find' },
  { title: '新闻', icon: 'icon-infom', path: '/frame/news' },
  { title: '我的', icon: 'icon-my', path: '/frame/user' }
]

class MyTabBar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: this.props.location.pathname
    }
  }
  componentDidUpdate(oldProps){
    const {pathname} = this.props.location
    if (pathname !== oldProps.location.pathname){
      this.setState({
        selectedTab: pathname
      })
    }
  }
  renderTabItems () {
    return tabList.map(item => {
      return <TabBar.Item
        title={item.title}
        key={item.path}
        icon={<i className={`iconfont ${item.icon}`}></i>}
        selectedIcon={<i className={`iconfont ${item.icon}`}></i>}
        selected={this.state.selectedTab === item.path}
        onPress={() => {
          this.props.history.push(item.path)
          this.setState({
            selectedTab: item.path,
          });
        }}
        data-seed="logId"
      ></TabBar.Item>
    })
  }
  render () {
    return (
      <div className="zf-tabbar">
        <TabBar
          tintColor="#21b97a"
          barTintColor="white"
        >
          {this.renderTabItems()}
        </TabBar>
      </div>
    );
  }
}

export default withRouter(MyTabBar)